<template>
  <div class="addEvaluateProple">
    <el-button type="primary"
               @click="addEvaluate">新增评价人员</el-button>
    <img class="closeImg"
         src="../../../assets/img/close.png"
         @click="closeAdd"
         alt="">
    <el-table :highlight-current-row="true"
              border
              :header-cell-style="{ background: '#f5f5f5' }"
              :data="evaluateList.list">
      <el-table-column type="index"
                       label="序号"
                       sortable
                       align="center"
                       width="80"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="person_name"
                       label="被评价人员"
                       align="center"
                       show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="岗位"
                       prop="evaluator_job_name"
                       align="center">
      </el-table-column>
      <el-table-column label="评价人员手机号"
                       prop="evaluator_phone"
                       align="center">
      </el-table-column>
      <el-table-column label="操作"
                       show-overflow-tooltip
                       align="center">
        <template slot-scope="scope">
          <el-button type="text"
                     @click="remove(scope.row)">移除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="handlePageChange"
                   @size-change="handleSizeChange"
                   :current-page="evaRequestParam.page"
                   :page-size="evaRequestParam.page_size"
                   layout="total,sizes,prev, pager, next, jumper"
                   background
                   :total="evaluateList.total_count"
                   align="center">
    </el-pagination>
    <!-- 新增评价人员 -->
    <el-dialog title="新增评价人员"
               @close="closeDialog"
               :visible.sync="dialogTableVisible"
               width="80%">
      <el-row :gutter="20">
        <el-form label-width="80px">
          <el-col :span="6">
            <el-form-item label="岗位名称">
              <el-select v-model="requestParam.job_name"
                         placeholder="请选择">
                <el-option v-for="(option,index) in jobNameList"
                           :key="index"
                           :value="option.field_value"
                           :label="option.field_value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="一级机构">
              <el-select v-model="requestParam.one_organ"
                         @change="changeOne"
                         placeholder="请选择一级机构">
                <el-option v-for="(option,index) in oneOrganList"
                           :key="index"
                           :value="option.field_value"
                           :label="option.field_value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级机构">
              <el-select v-model="requestParam.two_organ"
                         @change="changeTwo"
                         placeholder="请选择二级机构">
                <el-option v-for="(option,index) in  evaluateOrgan.twoOrganList"
                           :key="index"
                           :value="option.field_value"
                           :label="option.field_value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="三级机构">
              <el-select v-model="requestParam.three_organ"
                         @change="changeThree"
                         placeholder="请选择三级机构">
                <el-option v-for="(option,index) in  evaluateOrgan.threeOrganList"
                           :key="index"
                           :value="option.field_value"
                           :label="option.field_value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="四级机构">
              <el-select v-model="requestParam.four_organ"
                         @change="changeFour"
                         placeholder="请选择四级机构">
                <el-option v-for="(option,index) in  evaluateOrgan.fourOrganList"
                           :key="index"
                           :value="option.field_value"
                           :label="option.field_value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="五级机构">
              <el-select v-model="requestParam.five_organ"
                         @change="changeFive"
                         placeholder="请选择五级机构">
                <el-option v-for="(option,index) in  evaluateOrgan.fiveOrganList"
                           :key="index"
                           :value="option.field_value"
                           :label="option.field_value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="六级机构">
              <el-select v-model="requestParam.six_organ"
                         placeholder="请选择六级机构">
                <el-option v-for="(option,index) in  evaluateOrgan.sixOrganList"
                           :key="index"
                           :value="option.field_value"
                           :label="option.field_value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6"
                  class="flex-end">
            <el-button @click="search"
                       type="primary">查询</el-button>
            <el-button @click="reset">重置</el-button>
          </el-col>
        </el-form>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table :highlight-current-row="true"
                    border
                    ref="multipleTable"
                    :row-key="getRowKeys"
                    @selection-change='handleSelectionChange'
                    @select="changeCheck"
                    :header-cell-style="{ background: '#f5f5f5' }"
                    :data="chooseEvaluateList.list">
            <el-table-column type="selection"
                             :reserve-selection="true"
                             width="55">
            </el-table-column>
            <el-table-column type="index"
                             label="序号"
                             sortable
                             align="center"
                             width="80"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="person_name"
                             label="姓名"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="联系方式"
                             width="100"
                             prop="phone"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="岗位名称"
                             show-overflow-tooltip
                             prop="job_name"
                             align="center">
            </el-table-column>
            <el-table-column prop="manage_level"
                             label="管理层级"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="job_level"
                             label="职务级别"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="strip_line"
                             label="条线"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="person_status"
                             label="员工状态"
                             align="center"
                             show-overflow-tooltip>
              <template slot-scope="scope">
                <p>{{scope.row.person_status === '1'?'在岗' : '试用期'}}</p>
              </template>
            </el-table-column>
            <el-table-column prop="one_organ"
                             label="一级机构"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="two_organ"
                             label="二级机构"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="three_organ"
                             label="三级机构"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="four_organ"
                             label="四级机构"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="five_organ"
                             label="五级机构"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="六级机构"
                             prop="six_organ"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="24"
                style="margin-top:20px!important;">
          <el-pagination @current-change="handlechoosePageChange"
                         @size-change="handlechooseSizeChange"
                         :current-page="requestParam.page"
                         :page-size="requestParam.page_size"
                         layout="total,sizes,prev, pager, next, jumper"
                         background
                         :total="chooseEvaluateList.total_count"
                         align="center">
          </el-pagination>
        </el-col>
      </el-row>
      <span slot="footer"
            class="dialog-footer">
        <el-button type="primary"
                   @click="saveAddPeople">确 定</el-button>
        <el-button @click="cancelEvaluate">取 消</el-button>

      </span>
    </el-dialog>
  </div>
</template>

<script>
import { backEvaluateApi } from '@/services/ProjectCenter'

export default {
  data () {
    return {
      addcheckList: {
        field: '',
        p_field_value: '',
        p_field: '',
      },
      jobNameList: [], //岗位名称
      oneOrganList: [], //一级机构
      evaluateOrgan: {
        twoOrganList: [],
        threeOrganList: [],
        fourOrganList: [],
        fiveOrganList: [],
        sixOrganList: [],
      },
      dialogTableVisible: false,
      requestParam: {
        comp_id: '',
        assessee_data_id: '',
        exercise_id: '',
        person_id: '',
        search_word: '',
        job_name: '',
        one_organ: '',
        two_organ: '',
        three_organ: '',
        four_organ: '',
        five_organ: '',
        six_organ: '',
        is_page: 1,
        page: 1,
        page_size: 10
      },
      resetParam: {
        search_word: '',
        job_name: '',
        one_organ: '',
        two_organ: '',
        three_organ: '',
        four_organ: '',
        five_organ: '',
        six_organ: '',
        is_page: 1,
        page: 1,
        page_size: 10
      },
      chooseEvaluateList: {
        list: [],
        total: 0,
        total_count: 0
      },
      evaluateList: {
        list: [],
        total: 0,
        total_count: 0
      },
      evaRequestParam: {
        assessee_data_id: '',
        is_page: 1,
        page: 1,
        page_size: 10
      },
      checkIds: [],
      //选中的list
      getRowKeys (row) {
        //记录每行的key值
        return row.person_id;
      },
    }
  },
  created () {
    this.evaRequestParam.assessee_data_id = this.$route.query.dataId
    this.requestParam.assessee_data_id = this.$route.query.dataId
    this.getEvaluateList()

    this.getjobNameList()
    this.getoneOrganList()
    this.requestParam.comp_id = JSON.parse(window.localStorage.userInfo).comp_id// 公司id
    this.requestParam.person_id = this.$route.query.personId
  },
  mounted () { },
  methods: {
    //获取岗位名称下拉框数据
    getjobNameList () {
      backEvaluateApi.getSelectList({
        params: {
          comp_id: this.requestParam.comp_id,
          field: 'job_name',
          p_field: '',
          p_field_value: ""
        }
      }).then((res) => {
        this.jobNameList = res.data.list
      }).catch(err => {
        console.log(err);
      })
    },
    //获取一级机构下拉框数据
    getoneOrganList () {
      backEvaluateApi.getSelectList({
        params: {
          comp_id: this.requestParam.comp_id,
          field: 'one_organ',
          p_field: '',
          p_field_value: ""
        }
      }).then((res) => {
        this.oneOrganList = res.data.list
      }).catch(err => {
        console.log(err);
      })
    },
    //选择一级机构
    changeOne (val) {
      let newVal = {
        field: 'two_organ',
        p_field: 'one_organ',
        p_field_value: val
      }
      this.addcheckList = newVal
      this.getelseOrgan()
    },
    //二级
    changeTwo (val) {
      let newVal = {
        field: 'three_organ',
        p_field: 'two_organ',
        p_field_value: val
      }
      this.addcheckList = newVal
      this.getelseOrgan()
    },
    //三级
    changeThree (val) {
      let newVal = {
        field: 'four_organ',
        p_field: 'three_organ',
        p_field_value: val
      }
      this.addcheckList = newVal
      this.getelseOrgan()
    },
    //四级
    changeFour (val) {
      let newVal = {
        field: 'five_organ',
        p_field: 'four_organ',
        p_field_value: val
      }
      this.addcheckList = newVal
      this.getelseOrgan()
    },
    //五级
    changeFive (val) {
      let newVal = {
        field: 'six_organ',
        p_field: 'five_organ',
        p_field_value: val
      }
      this.addcheckList = newVal
      this.getelseOrgan()
    },
    //获取机构下拉框数据
    getelseOrgan () {
      backEvaluateApi.getSelectList({
        params: this.addcheckList
      }).then((res) => {
        if (this.addcheckList.field === 'two_organ') {
          this.evaluateOrgan.twoOrganList = res.data.list
        } else if (this.addcheckList.field === 'three_organ') {
          this.evaluateOrgan.threeOrganList = res.data.list
        } else if (this.addcheckList.field === 'four_organ') {
          this.evaluateOrgan.fourOrganList = res.data.list
        } else if (this.addcheckList.field === 'five_organ') {
          this.evaluateOrgan.fiveOrganList = res.data.list
        } else {
          this.evaluateOrgan.sixOrganList = res.data.list
        }
      }).catch(err => {
        console.log(err);
      })
    },
    getEvaluateList () {
      backEvaluateApi.getEvaluateDetailList({
        params: this.evaRequestParam
      }).then((res) => {
        if (res.code === 0) {
          this.evaluateList = res.data
        }
      }).catch(err => {
        console.log(err);
      })
    },
    closeAdd () {
      this.$router.push({ path: '\ActivityManagement' })
    },
    handlePageChange (val) {
      this.evaRequestParam.page = val
      this.getEvaluateList()
    },
    handleSizeChange (val) {
      this.evaRequestParam.page_size = val
      this.getEvaluateList()
    },
    //移除
    remove (row) {
      backEvaluateApi.removeEvaluate({
        params: {
          evaluator_data_id: row.evaluator_data_id
        }
      }).then((res) => {
        if (res.code === 0) {
          this.$message.success('删除成功!')
          this.getEvaluateList()
        }
      }).catch(err => {
        console.log(err);
      })
    },
    search () {
      backEvaluateApi.addChooseList({
        params: this.requestParam
      }).then((res) => {
        if (res.code === 0) {
          this.chooseEvaluateList = res.data
          this.chooseEvaluateList.list.forEach((ele) => {
            this.checkIds.forEach((item) => {
              if (ele.person_id == item) {
                this.$refs.multipleTable.toggleRowSelection(ele, true);
              }
            })
          })
        }
      }).catch(err => {
        console.log(err);
      })
    },
    handleSelectionChange (rows) {
      this.checkIds = []
      rows.forEach(item => {
        this.checkIds.push(item.person_id)
        //去重
        this.checkIds = Array.from(new Set(this.checkIds))
      });
    },
    changeCheck (selection, row) {
      let selected = selection.length && selection.indexOf(row) !== -1;
      //selected是当前点击的选中态
      //选中的表格取消事件
      if (selected === false) {
        this.$nextTick(() => {
          this.$refs.multipleTable.selection.forEach((ele) => {
            if (ele.person_id == row.person_id) {
              this.$refs.multipleTable.toggleRowSelection(ele, false);
            }
          });
        });
      }
    },
    //关闭弹窗后清空选中
    closeDialog () {
      this.$refs.multipleTable.clearSelection()
      this.checkIds = []
      this.reset()
    },
    //取消
    cancelEvaluate () {
      this.$refs.multipleTable.clearSelection()
      this.checkIds = []
      this.dialogTableVisible = false
    },
    reset () {
      let reset = JSON.parse(JSON.stringify(this.resetParam))
      this.requestParam = Object.assign(this.requestParam, reset)
      this.search()
      let selArr = {
        twoOrganList: [],
        threeOrganList: [],
        fourOrganList: [],
        fiveOrganList: [],
        sixOrganList: [],
      }
      this.evaluateOrgan = selArr
    },
    handlechoosePageChange (val) {
      this.requestParam.page = val
      this.search()
    },
    handlechooseSizeChange (val) {
      this.requestParam.page_size = val
      this.search()
    },
    //新增评价人员
    addEvaluate () {
      this.dialogTableVisible = true
      this.reset() //查询条件重置
    },
    //保存被评价人员
    saveAddPeople () {
      let ids = this.checkIds.join(',')
      let dataId = this.$route.query.dataId
      backEvaluateApi.saveAddEvaluate({
        data: {
          assessee_data_id: dataId,
          person_ids: ids
        }
      }).then((res) => {
        if (res.code === 0) {
          this.$message.success('添加成功')
          this.dialogTableVisible = false
          this.checkIds = []
          this.getEvaluateList()
        }
      }).catch(err => {
        console.log(err);
      })
    },
  },
  computed: {},
  watch: {}
}
</script>

<style lang="scss" scoped>
.addEvaluateProple {
  padding: 20px;
  .el-table {
    margin-top: 20px;
  }
  .closeImg {
    width: 12px;
    float: right;
    cursor: pointer;
  }
}
</style>
